import React, { Component, createContext, PureComponent } from 'react'

// 创建context
const UserContext = createContext({
  nickname: "默认",
  level: -1,
  region: "中国"
})

// 高阶组件
function enhanceRegionProps(WrappedComponent) {
  return props => {
    return <WrappedComponent {...props} region="中国" />
  }
}

class Home extends PureComponent {
  render() {
    return (
      <UserContext.Consumer>
        {
          user => {
            return <h2>Home: {`nickname: ${user.nickname}  grade: ${user.level} region: ${user.region}`}</h2>
          }
        }
      </UserContext.Consumer>
    )
  }
}

// const EnhanceHome = enhanceRegionProps(Home)

class About extends PureComponent {
  render() {
    return <h2>About: {`nickname: ${this.props.nickname}  grade: ${this.props.level} region: ${this.props.region}`}</h2>
  }
}

// const EnhanceAbout = enhanceRegionProps(About)

class App extends Component {
  render() {
    return (
      <div>
        App:3
        <UserContext.Provider value={{nickname: "yz", level: "18", region: "no"}}>
          <Home/>
          <About/>
        </UserContext.Provider>
      </div>
    )
  }
}

export default App
